<template>
    <el-form inline :model="form">
        <el-form-item label="版本号" style="width: 250px;">
            <baseCombox url="/infReport/getVersion" clearable @change="changeVersion()" valueField="LABEL"
                labelField="LABEL" placeholder="请选择版本号" v-model="form.version"></baseCombox>
        </el-form-item>
        <el-form-item label="报告" style="width: 300px;">
            <el-select style="width: 100%;" v-model="form.id" filterable clearable remote placeholder="请选择报告"
                :remote-method="getReportList" :reportLoading="reportLoading">
                <el-option v-for="item in reportOptions" :key="item.reportId" :label="item.reportName"
                    :value="item.reportId" />
            </el-select>
        </el-form-item>
        <slot></slot>
    </el-form>
</template>
<script setup>
import { getReportByVersion } from "@/api/testmanage/report";
import { isVoid } from "@/utils/util";
const { proxy } = getCurrentInstance();
const emit = defineEmits(['update:version', 'update:report'])
const form = ref({
    version: "",
    id: "",
});
const reportOptions = ref([]);
const reportLoading = ref(false);
const changeVersion = () => {
    form.value.id = null;
}
const getReportList = (query) => {
    reportOptions.value = []
    if (isVoid(form.value.version)) {
        proxy.$modal.msgError("请先选择版本号");
        return
    }
    reportLoading.value = true
    let data = {
        pageNum: 1,
        pageSize: 20,
        reportVersion: form.value.version,
        condition: query
    }
    getReportByVersion(data).then(response => {
        if (response.code === 200) {
            reportOptions.value = response.result
        } else {
            reportOptions.value = []
        }
    }).finally(() => {
        reportLoading.value = false;
    });
}

watch(() => form.value.version, (newVal,oldValue) => {
    if(newVal !== oldValue && newVal){
        getReportList();
    }
    emit('update:version', form.value.version)
}, { immediate: true, deep: true })
watch(() => form.value.id, () => {
    emit('update:report', form.value.id)
}, { immediate: true, deep: true })
</script>